@import "../../assets/scss/core/base";

$steps-prefix-cls: #{$jigsaw-prefix}-steps;
$step-item-prefix-cls: #{$jigsaw-prefix}-step-item;

.#{$steps-prefix-cls} {
    @include inline-block();
    width: 100%;
    height: 100%;
    .#{$jigsaw-prefix}-steps-container {
        display: flex;
        width: 100%;
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        .#{$jigsaw-prefix}-step-left-space {
            flex: 0.5;
            height: 10px;
            min-width: 60px;
        }
        .#{$step-item-prefix-cls} {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width:146px;
            .#{$jigsaw-prefix}-step-item-container {
                width: 100%;
                height: 100%;
            }
            .#{$jigsaw-prefix}-step-title {
                font-size: $font-size-lg;
                color: $heading-color-dark;
                line-height: $height-lg;
            }

            .#{$jigsaw-prefix}-sub-title {
                font-size: $font-size-base;
                color: $text-color-secondary;
                margin-top: 5px;
            }
            .#{$jigsaw-prefix}-step-title,
            .#{$jigsaw-prefix}-sub-title {
                text-align: center;
                margin-left: -50%;
                width: 100%;
                padding-left: 26px;
            }

            .#{$jigsaw-prefix}-logo-line-container {
                display: flex;
                align-items: center;

                .#{$jigsaw-prefix}-step-status-logo {
                    width: 26px;
                    height: 26px;
                    min-width: 26px;
                    min-height: 26px;
                    border-radius: 26px;
                    background: #123;
                    color: #fff;
                    font-size: $font-size-base;
                    overflow: hidden;
                    i{
                        width: 26px;
                        height: 26px;
                        text-align: center;
                        line-height: 26px;
                    }
                }

                .#{$jigsaw-prefix}-step-line {
                    min-width: 80px;
                    height: 2px;
                    background: #345;
                    margin: 0 20px;
                    flex-grow: 1;
                }
                .#{$jigsaw-prefix}-sub-title-v {
                    display: none;
                }
            }

            &:nth-last-child(3) {
                flex: 0.5;
                padding-right: 26px;
                .#{$jigsaw-prefix}-step-line {
                    display: none ;
                }
                .#{$jigsaw-prefix}-step-title,
                .#{$jigsaw-prefix}-sub-title {
                    margin-left: -100%;
                    width: 200%;
                }
            }
            .#{$step-item-prefix-cls}-processing {
                .#{$jigsaw-prefix}-step-status-logo {
                    background-color: #41ADDC;
                }
                .#{$jigsaw-prefix}-step-line {
                    background-color: #41ADDC;
                }
            }

            .#{$step-item-prefix-cls}-done {
                .#{$jigsaw-prefix}-step-status-logo {
                    background-color: #7ACA6B;
                }
                .#{$jigsaw-prefix}-step-line {
                    background-color: #7ACA6B;
                }
            }

            .#{$step-item-prefix-cls}-error {
                .#{$jigsaw-prefix}-step-status-logo {
                    background-color: #E67877;
                }
                .#{$jigsaw-prefix}-step-line {
                    background-color: #E67877;
                }
            }

            .#{$step-item-prefix-cls}-warning {
                .#{$jigsaw-prefix}-step-status-logo {
                    background-color: orange;
                }

                .#{$jigsaw-prefix}-step-line {
                    background-color: orange;
                }
            }

            .#{$step-item-prefix-cls}-skipped {
                .#{$jigsaw-prefix}-step-status-logo {
                    background-color: $text-color-secondary;
                }

                .#{$jigsaw-prefix}-step-line {
                    background-color: $text-color-secondary;
                }
            }

            .#{$step-item-prefix-cls}-waiting {
                .#{$jigsaw-prefix}-step-status-logo {
                    background-color: $text-color;
                }

                .#{$jigsaw-prefix}-step-line {
                    background-color: $text-color;
                }
            }
        }

    }
}

.#{$steps-prefix-cls}-direction-vertical {
    .#{$jigsaw-prefix}-steps-container {
        overflow-x: hidden;
        overflow-y: auto;
        flex-direction: column;
        display: flex;
        width: auto;
        height: 100%;
        .#{$jigsaw-prefix}-step-left-space {
            flex: 0;
            min-width: 0;
            height: 0;
        }
        .#{$step-item-prefix-cls} {
            display: flex;
            flex: 1;
            min-height: 140px;
            min-width:0;
            .#{$jigsaw-prefix}-step-item-container {
                flex-direction: column;
                height: 100%;
                width: auto;
                display: flex;
            }

            .#{$jigsaw-prefix}-step-title {
                font-size: $font-size-lg;
                color: $heading-color-dark;
                line-height: $height-lg;
                margin: 0 0 5px 0;
            }
            .#{$jigsaw-prefix}-sub-title {
               display: none;
            }
            .#{$jigsaw-prefix}-sub-title-v {
                font-size: $font-size-base;
                color: $text-color-secondary;
                margin: 5px 0 10px 0;
                max-height: 100%;
            }

            .#{$jigsaw-prefix}-step-title,
            .#{$jigsaw-prefix}-sub-title-v {
                text-align: center;
                padding-left: 0;
                width: 100%;
            }

            .#{$jigsaw-prefix}-logo-line-container {
                display: flex;
                align-items: center;
                flex-direction: column;
                flex-grow: 1;
                min-width:0;
                .#{$jigsaw-prefix}-step-line {
                    min-height: 30px;
                    width: 2px;
                    min-width: 0;
                    margin: 0 20px;
                    flex-grow: 1;
                }
                .#{$jigsaw-prefix}-sub-title-v {
                    display: block;
                }
            }
            &:nth-last-child(3) {
                padding-right: 0;
                .#{$jigsaw-prefix}-step-title {
                    text-align: center;
                    text-indent: 0;
                    margin: 5px 0;
                    width: 100%;

                }
            }
        }
    }
}

.#{$steps-prefix-cls}-size-large {
    .#{$step-item-prefix-cls}{
        min-width: 150px !important;

        .#{$jigsaw-prefix}-step-title {
            font-size: $font-size-lg + 2px !important;
            padding-left: 30px !important;
            line-height: $height-lg + 2 !important;
        }
        .#{$jigsaw-prefix}-sub-title,.#{$jigsaw-prefix}-sub-title-v {
            font-size: $font-size-base + 2px !important;
            padding-left: 30px !important;
        }
        .#{$jigsaw-prefix}-step-status-logo {
            font-size: $font-size-base + 2px !important;
            width: 30px !important;
            height: 30px !important;
            min-width: 30px !important;
            min-height: 30px !important;
            i{
                width: 30px!important;
                height: 30px!important;
                line-height: 30px!important;
            }
        }
        &:nth-last-child(3) {
                padding-right:30px!important;
        }
    }
    &.#{$steps-prefix-cls}-direction-vertical{
        .#{$jigsaw-prefix}-step-title,.#{$jigsaw-prefix}-sub-title-v{
            padding-left: 0 !important;
        }
        .#{$step-item-prefix-cls}{
            min-width: 0 !important;
        }
        &:nth-last-child(3) {
                padding-right:0!important;
        }
    }
}

.#{$steps-prefix-cls}-size-small {
    .#{$step-item-prefix-cls}{
        min-width: 140px !important;

        .#{$jigsaw-prefix}-step-title {
            font-size: $font-size-lg - 2px !important;
            padding-left: 20px !important;
            line-height: $height-lg - 2 !important;
        }
        .#{$jigsaw-prefix}-sub-title,.#{$jigsaw-prefix}-sub-title-v {
            font-size: $font-size-base - 2px !important;
            padding-left: 20px !important;
        }
        .#{$jigsaw-prefix}-step-status-logo {
            font-size: $font-size-base - 2px !important;
            width: 20px !important;
            height: 20px !important;
            min-width: 20px !important;
            min-height: 20px !important;
            i{
                width: 20px!important;
                height: 20px!important;
                line-height: 20px!important;
            }
        }
        &:nth-last-child(3) {
                padding-right:20px!important;
        }
    }
    &.#{$steps-prefix-cls}-direction-vertical{
        .#{$jigsaw-prefix}-step-title,.#{$jigsaw-prefix}-sub-title-v{
            padding-left: 0 !important;
        }
        .#{$step-item-prefix-cls}{
            min-width: 0!important;
        }
        .#{$jigsaw-prefix}-step-title {
            padding-right:0px!important;
        }
        &:nth-last-child(3) {
                padding-right:0!important;
        }
    }
}
